<!DOCTYPE html>

<style type="text/css">
.text-red {
	color: red;
	font-weight: 600;
	font-size: 18px;
	position: relative;
	top: 3px;
	margin-right: 3px;
	margin-left: 0px;
	padding: 0px;
}
</style>
<div id="curriculum_table_div">
	<!-- 查询窗口 -->
	<div id="mySearch" class="modal fade" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">查询</h4>
				</div>
				<div class="modal-body">
					<!-- 以下为要查询的的内容 -->
					<div class="text-center">
						<select id="search_year" class="selectpicker"
							data-bind="value:queryCondition.year" name="year"
							onchange="searchSelectYear(this.value)">
							<option style="display: none"></option>
							<option data-th-each="year:${years}" data-th-value="${year}"
								data-th-text="${year}">1</option>
						</select> <select class="selectpicker" id="search_college"
							data-bind="value:queryCondition.college" name="college"
							onchange="searchSelectCollege(this.value)"></select> <select
							class="selectpicker" id="search_profesion"
							data-bind="value:queryCondition.profesion" name="profesion"></select>
						<select id="search_kkxq" class="selectpicker" name="kkxq"
							data-bind="value:queryCondition.kkxq">
							<option style="display: none"></option>
							<option value="一">第一学期</option>
							<option value="二">第二学期</option>
							<option value="三">第三学期</option>
							<option value="四">第四学期</option>
							<option value="五">第五学期</option>
							<option value="六">第六学期</option>
						</select>
					</div>

					<!-- 以上为要查询的内容 -->
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-primary" data-dismiss="modal"
						data-bind="click:queryClick">
						<span class="glyphicon glyphicon-search" aria-hidden="true"></span>&nbsp;查询
					</button>
					<!-- <button type="button" class="btn btn-default" data-dismiss="modal"
						data-bind="click:clearClick">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
					</button> -->
					<button id="clean" type="button" class="btn btn-default"
						data-dismiss="modal" onclick="cleanSearch()"
						data-bind="click:clearClick">
						<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>&nbsp;清空
					</button>
				</div>
			</div>
		</div>
	</div>

	<!-- 工具栏 -->
	<div id="toolbar" class="btn-group">
		<button data-bind="click:addClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
		</button>
		<button data-bind="click:editClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>修改
		</button>
		<button data-bind="click:deleteClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除
		</button>

		<button id='tit' data-bind="click:searchClick" type="button"
			class="btn btn-default">
			<span class="glyphicon glyphicon-search" aria-hidden="true"></span>查询
		</button>
		<button type="button" class="btn btn-primary" onclick="window.location.href='curriculum/export'">
			导出
		   </button>
		<input class="btn btn-primary" data-toggle="modal" data-target="#excelmodal" type="button" value="批量导入" />
	</div>

	<!-- 表格，表头里定义了表要显示的字段，data-formatter 里只能跟一个方法名 -->
	<table id="mytable" data-bind="bootstrapTable:$root">
		<thead>
			<tr>
				<th data-checkbox="true"></th>

				<th data-field="kcmc">课程名称</th>
				<th data-field="kcdm">课程代码</th>
				<th data-field="zongxs">总学时</th>
				<th data-field="xf">学分</th>
				<th data-field="jsxs">讲授学时</th>
				<th data-field="syxs">实验学时</th>
				<th data-field="sjxs">上机学时</th>
				<th data-field="qtxs">其他学时</th>
				<th data-field="kclb">课程类别</th>
				<th data-field="zhouxs">每周学时</th>
				<th data-field="khfs">考核方式</th>
				<th data-field="kkxq">开课学期</th>
				<th data-field="year">年级</th>
				<th data-field="college">学院</th>
				<th data-field="profesion">专业</th>
				
			</tr>
		</thead>
	</table>

</div>

		<div class="modal fade" id="excelmodal">
		   <div class="modal-dialog" >
		       <div class="modal-content">
		          <div class="modal-header">
		                导入人才方案
		               <button class="close"  data-dismiss="modal"><span>&times;</span></button>
		          </div>
		          <div class="modal-body">
	                  <form id="importForm" action="curriculum/excelimport" method="post" enctype="multipart/form-data"
							class="form-search" style="padding-left:20px;text-align:center;" onSubmit="loading('正在导入，请稍等...');"><br/>
						    <span style=" margin-left:35px;float:left; line-height:30px; height:30px;">请选择上传文件：</span>
				            <input id="uploadFile" name="file" type="file" style=" width:300px;border:1px solid #ccc; margin-left:140px;" ><br/><br/>　 　
							<input id="btnImportSubmit" class="btn btn-primary" onclick="upeload();" value="   导    入   "/>
							<a href="static/excel/curriculum.xls">下载模板</a>
			          </form>
	              </div>
		       </div>
		   </div>
		</div>

<!-- 以下是javascript内容 -->
<script type="text/javascript">
$(function(){
    var data =  {
	    tableParams : {
	    	url : 'curriculum/page'
	    	},
	    	urls : {
	    		delete : 'curriculum/delete',
	    		update : 'curriculum/edit',
	    		add : 'curriculum/edit',
	    		search:'curriculum/search'
	    	},
	    	queryCondition : {
	    		year : '',
	    		college : '',
	    		profesion : '',
	    		kkxq:''
	    	}
	};
	ko.applyBindings(new BsTableViewModel(data),document.getElementById('curriculum_table_div'));	
	
});
function typeformatter(value,row,index){
	return value==0?'平时考核':'期末考试';
}


$("#search_year").selectpicker({
	title : '选择年级',
	width:'fit'
});
$("#search_college").selectpicker({
	title : '选择学院',
	width:'fit'
});
$("#search_profesion").selectpicker({
	title : '选择专业',
	width:'fit'
});
$("#search_kkxq").selectpicker({
	title : '选择开课学期',
	width:'fit'
});

function searchSelectYear(year) {
	$.post('curriculum/getCollege', {
		year : year
	}, function(result) {
			$('#search_college,#search_profesion').html(
					'<option style="display: none"></option>');
			
			for (var i = 0; i < result.length; i++) {
				$('#search_college').append(
						"<option value='"+result[i]+"'>" + result[i]
								+ "</option>");
			}
			$('#search_college').selectpicker('refresh');
			$('#search_profesion').selectpicker('refresh');
			
	})

}

function searchSelectCollege(college) {
	var year = $('#search_year').val();
	$.post('curriculum/getProfesion', {
		year : year,
		college : college
	},
			function(result) {
					$('#search_profesion').html(
							'<option style="display: none"></option>');
					
					for (var i = 0; i < result.length; i++) {
						$('#search_profesion').append(
								"<option value='"+result[i]+"'>"
										+ result[i] + "</option>");
					}
					$('#search_profesion').selectpicker('refresh');
					
			})
}

$(function(){
	$('#mySearch').on('hidden.bs.modal', function (e) {
		var searchYear = $('#search_year').val();
		var searchCollege = $('#search_college').val();
		var searchProfesion = $('#search_profesion').val();
		var searchKkxq = $('#search_kkxq').val();
		var tit='';
		if(searchYear!=null&&searchYear!=''){
			tit+=searchYear+' \\ ';
		}
		if(searchCollege!=null&&searchCollege!=''){
			tit+=searchCollege+' \\ ';
		}
		if(searchProfesion!=null&&searchProfesion!=''){
			
			tit+=searchProfesion+' \\ ';
		}
		if(searchKkxq!=null&&searchKkxq!=''){
			tit+='第'+searchKkxq+'学期 \\ ';
		}
		if(tit!=''){
			$('#tit').html(tit.slice(0,-2));
		}else{
			$('#tit').html('查询');
		}
		})
})

//清空查询中的bootselect下拉框
	function cleanSearch(){
		var searchs = $('#mySearch').find('div.modal-body').find('select.selectpicker');
		for(var i=0;i<searchs.length;i++){
			if(searchs[i].name=='year'){	//这里排除year,因为我的year数据是直接调用后台的,其他页面删除if
				$(searchs[i]).selectpicker('val','');
				continue;
			}
			$(searchs[i]).html('<option style="display: none"></option>');
			$(searchs[i]).selectpicker('refresh');
		} 
		
	}
	
	function upeload() {
		  var formData = new FormData($("#importForm")[0]);
	  $.ajax({
	//      async : flase,
	//      cache : flase,
	      type : "post",
	      data : formData,
	      url : 'curriculum/excelimport',   //ajax上传的路径
	      dataType : 'text',
	      contentType: false, //必须，告诉jquery不要设置Content-Type请求头
	      processData: false, //必须，告诉jquery不要处理发送的数据
	      success : function(data) {
	    		$('#excelmodal').modal("hide");
	    		bootbox.alert(data);
				$('#curriculum_table_div').find('table').bootstrapTable('refresh'); //刷新表格
	      }
	  });
	}

</script>
